DOM (Document Object Model)
The DOM is a programming interface that represents the structure of an HTML or XML document as a tree of objects. It allows JavaScript to dynamically access and manipulate the content, structure, and style of web pages.
Key Features of DOM:
Tree-Like Structure: The document is structured as a hierarchical tree with nodes.
Manipulation: You can add, remove, or modify elements and attributes.
Event Handling: You can attach event listeners to elements (e.g., click, mouseover).
CSS Styling: JavaScript can modify CSS properties dynamically.
Traversal: You can navigate through parent, child, and sibling elements.
Common DOM Methods:
document.getElementById("id")
document.querySelector(".class")
document.createElement("div")
element.appendChild(childElement)
element.innerHTML = "New Content"
element.style.color = "red"
Example:-
document.body.style.backgroundColor = "blue";
BOM (Browser Object Model) in JavaScript
The BOM represents the browser environment and provides access to various browser functionalities, such as the window, history, navigator, location, and screen.
Interacts with the Browser: Controls browser properties like window size, history, and URL redirection.
No Standard Specification: Unlike the DOM, the BOM is not standardized.
Key Features of BOM:
Interacts with the Browser: Controls browser properties like window size, history, and URL redirection.
No Standard Specification: Unlike the DOM, the BOM is not standardized.
Provides Additional Information: Accesses details about the user's browser and screen resolution.
Common BOM Objects
window – Represents the browser window.
window.alert("Hello!")
window.open("https://example.com")
window.close()
navigator – Provides information about the browser.
navigator.userAgent
navigator.language
location – Handles URL-related properties.
location.href = "https://google.com"
console.log(location.hostname)
history – Manages browser session history.
history.back()
history.forward()
screen – Provides screen details.
console.log(screen.width, screen.height)
DOM VS BOM
